<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<image
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826957018619333.png"
				class="image_1" />
			<view class="flex-col group_1">
				<view class="flex-col section_1">
					<view class="flex-row row-cent">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826792503103103.png"
							class="image_2" />
						<text class="text_1">选材咨询介绍</text>
					</view>
					<text class="text_2">
						提供主材询价（需提供相关信息）和如何选材咨询服务（线上视频或线下），确保只买对的不买贵的！
					</text>
				</view>
				<view class="flex-col section_2" @click="go('pages/index/editHourse?id='+projectId)">
					<view class="justify-between section_3">
						<text class="text_3">我的房屋信息</text>
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826925530282387.png"
							class="image_4" />
					</view>
					<view class="flex-col group_3">
						<view class="justify-between">
							<text class="text_4">房屋位置</text>
							<text class="text_5">{{address}}</text>
						</view>
						<view class="flex-col group_5">
							<view class="justify-between">
								<text class="text_6">房屋面积</text>
								<text class="text_7">{{roomArea}}m²</text>
							</view>
							<view class="justify-between group_7">
								<text class="text_8">房屋类型</text>
								<text class="text_9">{{roomTypeName}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-row section_4" @click="go('pages/my/message/kefu?customer=0')">
					<text class="text_10">可尝试免费咨询15分钟再来下单</text>
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826993280119463.png"
						class="image_5" />
				</view>
				<view class="flex-col section_5">
					<view class="flex-col group_8">
						<view class="flex-row group_9">
							<image
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826792503103103.png"
								class="image_2" />
							<text class="text_11">选材咨询</text>
						</view>
						<text class="text_12">咨询类型</text>
						<view class="flex-row group_10">
							<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange" size="40"
								labelSize="40">
								<u-radio :customStyle="{ marginBottom: '15rpx', marginRight: '60rpx' }"
									v-for="(item, index) in radiolist1" :disabled="index == 1" :key="index"
									:label="item.name" iconSize="35" labelSize="30" :name="item.value">
								</u-radio> <text class="text_15">（暂未开通）</text>
							</u-radio-group>
						</view>

						<view class="justify-between group_12">
							<text class="text_16">联系方式</text>
							<input type="number" class="text_17" v-model="phone" value="" maxlength="11"  placeholder="请输入您的联系方式" />
						</view>
					</view>
					<view class="flex-col">
						<view class="justify-between group_14">
							<text class="text_18">咨询时间</text>
							<view class="flex-row">
								<u-number-box v-model="value" @change="valChange">
									<view slot="minus" class="flex-row minus">
										<u-icon name="minus" color="#9B9B9B" bold size="11"></u-icon>
									</view>
									<text slot="input" class="input">{{value}}</text>
									<view slot="plus" class="flex-row plus">
										<u-icon name="plus" color="#ffffff" bold size="10"></u-icon>
									</view>
								</u-number-box>
								<text class="text_20">小时</text>
							</view>
						</view>
						<view class="justify-between group_16" @click="couponShow=true">
							<text class="text_21">选择优惠券</text>
							<view class="flex-row group_17">
								<text class="text_22">{{couponAmount>0?'-¥'+couponAmount:'请选择'}}</text>
								<image src="http://107.148.1.63/user/16557838861113221762.png" class="image_11" />
							</view>
						</view>
					</view>
				</view>
				<view class="flex-col list">
					<view class="flex-col list-item">
						<view class="flex-row item-center">
							<image
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826792503103103.png"
								class="image_12" />
							<text class="text_23">服务流程</text>
						</view>
						<view class="flex-col items-start group_19">
							<u-parse :content="content.serviceProcess"></u-parse>
						</view>
					</view>
				</view>
				<view class="flex-col list">
					<view class="flex-col list-item">
						<view class="flex-row item-center">
							<image :src="$IMG_URL + '16557826792503103103.png'" class="image_12" />
							<text class="text_23">服务保障</text>
						</view>
						<view class="flex-col items-start group_19">
							<u-parse :content="content.serviceGuarantee"></u-parse>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="justify-between tab-bar">
			<view class="group_21">
				<text class="text_28">￥</text>
				<text class="text_29">{{price}}</text>
			</view>
			<view class="flex-row">
				<view class="flex-col items-center group_23" @click="go('pages/my/message/kefu?customer=0')">
					<image
						src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827948053418641.png"
						class="image_18" />
					<text class="text_30">在线咨询</text>
				</view>
				<view class="flex-col items-center text-wrapper" @click="submits"><text class="text_31">确认</text></view>
			</view>
		</view>
		<shop-coupon v-if="couponShow" :amount="price" :list="coupon" @confirm="couponConfirm"
			@close="couponShow=false"></shop-coupon>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {

				coupon: [],
				couponShow: false,
				couponAmount: 0,
				value: 1,
				couponid: 0,
				list_XYvBmWn8: [null, null],
				radiolist1: [{
						name: '线上视频',
						value: '0',
						disabled: false
					},
					{
						name: '线下沟通',
						value: '1',
						disabled: false
					},

				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '0',
				room_area: '',
				room_type: '',
				price: 0,
				roomTypeName: '',
				roomArea: 0,
				district: '',
				address: '',
				roomTypeArray: [],
				phone: '',
				projectId: '',
				content: {}
			};
		},
		onShow() {
			this.$store.dispatch('checkHouse');	 	
			this.couponid = 0;
			this.couponAmount = 0;
			this.rooms();
			this.getcontent();
			this.getCoupon();
		},
		methods: {
			getCoupon() {

				this.$http('coupon.coupon').then(r => {

					if (r.code == 200) {
						if (r.data) {
							this.coupon = r.data;
						}

					}
				});
			},
			couponConfirm(coupon) {
				let {
					coupon_id,
					amount,
					couponsId
				} = coupon;
				this.couponid = coupon_id;
				this.couponAmount = amount;
				this.couponShow = false;
				this.getMoney()
			},
			getcontent() {
				this.$http('consult.queryServiceDetails', {
					type: 7
				}).then(r => {
					if (r.code == 200) {
						this.content = r.data;
					}
				});
			},
			rooms() {
				this.$http('harryroom.queryHousing').then(r => {
					if (r.code == 200) {
						this.roomTypeName = r.data.project.roomTypeName
						this.roomArea = r.data.project.roomArea
						this.district = r.data.project.district
						this.address = r.data.project.provinceName + r.data.project.cityName + r.data.project
							.districtName + r.data.project.position
						this.projectId = r.data.project.projectId;
					    this.zixun()
					

					} 
				});
			},
			zixun() {
				this.$http('harryroom.queryServiceType', {
					areaId: this.district
				}).then(r => {
					if (r.code == 200) {
						this.roomTypeArray = r.data;
						this.getMoney()

					} else {
						this.$u.toast(r.msg);
					}
				});
			},
			getMoney() {
				this.$http('check.xccalcuInspection', {
					areaId: this.district,
					id: this.couponid,
					isSelect: this.radiovalue1,
					number: this.value
				}).then(r => {
					if (r.code == 200) {
						this.price = r.data;
					}
				});
			},
			groupChange(n) {
				this.radiovalue1 = n;
				this.getMoney();
			},
			radioChange(n) {
				// console.log('radioChange', n);
			},
			valChange(e) {
				this.value = e.value;
				this.getMoney()

			},
			submits() {
				
					if(this.phone=='')
					{
						this.$u.toast('请输入手机号码');
						return;
					}else{
						if (!uni.$u.test.mobile(this.phone)) {
							this.$u.toast('手机号码格式错误');
							return;
						}
					}
					
		
				var forms = {
					consultingTime: this.value,
					consultingTypeId: this.radiovalue1,
					isDis: this.couponid > 0 ? 1 : 0,
					monry: this.price,
					phonenumber: this.phone,
					projectId: this.projectId,
					id: this.couponid
				}
				this.$http('harryroom.consulting', forms).then(r => {
					if (r.code == 200) {
						this.$u.toast(r.msg);
						this.go('/pages/pay/pay?orderid=' + r.data);
					} else {
						this.$u.toast(r.msg);
					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.minus {
		height: 35rpx;
		width: 35rpx;
		border: 2px #9B9B9B solid;
		border-width: 4rpx;
		// border-color: #E6E6E6;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	uni-image>img {
		font-size: 48rpx;
	}

	.plus {
		width: 35rpx;
		height: 35rpx;
		background-color: #1d6aff;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		// margin-top: 1rpx;
		// margin-right: 1rpx;
		justify-content: center;
		align-items: center;
	}

	.item-center {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.list-item {
		padding: 14.5px 12px 16px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.image_2 {
		width: 13px;
		height: 8px;
	}

	.group_19 {
		margin-top: 32rpx;
	}

	.image_12 {
		width: 13px;
		height: 8px;
	}

	.text_23 {
		margin-left: 8px;
		color: #333333;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.image_8 {
		flex-shrink: 0;
		width: 16px;
		height: 16px;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding-bottom: 16px;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.tab-bar {
		padding: 5.5px 11.5px 8px;
		background-color: #ffffff;
		box-shadow: 0px -0.5px 0px 0px #00000014;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.image_1 {
		flex-shrink: 0;
		width: 100vw;
		height: 46.6667vw;
	}

	.group_1 {
		margin-bottom: 100rpx;
		padding: 0 12px;
		position: relative;
	}

	.group_21 {
		align-self: center;
		height: 19px;
	}

	.section_1 {
		padding: 20px 12px 20px;
		display: flex;
		justify-self: center;
		align-items: start;
		margin-top: -80rpx;
		z-index: 99;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.row-cent {
		// margin-top: -25rpx;
		display: flex;
		align-items: center;
	}

	.section_2 {
		margin-top: 10px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.section_4 {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		margin-top: 10px;
		text-align: center;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.section_5 {
		margin-top: 10px;
		padding-left: 12px;
		padding-right: 11.5px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.list {
		padding-top: 10px;
	}

	.text_28 {
		color: #fe641a;
		font-size: 10px;
		font-family: '.AppleSystemUIFont';
		line-height: 11.5px;
	}

	.text_29 {
		color: #fe641a;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.group_23 {
		margin-bottom: 2.5px;
	}

	.text-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 28px;
		margin-top: 2.5px;
		padding: 7px 12.5px;
		background-color: #1d6aff;
		border-radius: 18px;
		width: 110px;
		height: 36px;
	}

	.text_2 {
		margin-top: 17px;
		color: #666666;
		font-size: 13px;
		font-family: '.AppleSystemUIFont';
		text-align: left;
	}

	.section_3 {
		padding: 14.5px 12px 15.5px;
		background-color: #ebf2ff;
		border-radius: 8px 8px 0px 0px;
	}

	.group_3 {
		padding: 15px 11px 20.5px 12px;
	}

	.text_10 {
		// margin-bottom: 4.5px;
		color: #ff9d00;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.image_5 {
		margin-left: 7px;
		width: 20px;
		height: 20px;
	}

	.group_8 {
		border-bottom: solid 0.5px #eeeeee;
	}

	.list-item:last-of-type {
		margin-top: 10px;
	}

	.image_18 {
		flex-shrink: 0;
		width: 27px;
		height: 27px;
	}

	.text_30 {
		color: #666666;
		font-size: 10px;
		font-family: '.AppleSystemUIFont';
		line-height: 11.5px;
	}

	.text_31 {
		color: #ffffff;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';

	}

	.text_1 {
		margin-left: 8px;
		color: #333333;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
	}

	.text_3 {
		margin-bottom: 2px;
		color: #1d6aff;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.image_4 {
		margin-top: 5px;
		width: 15px;
		height: 16px;
	}

	.group_5 {
		margin-top: 19.5px;
	}

	.group_9 {
		display: flex;
		align-items: center;
		height: 100rpx;
		border-bottom: solid 0.5px #eeeeee;
	}

	.text_12 {
		margin-top: 14px;
		align-self: flex-start;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.group_10 {
		margin-top: 14px;
		/* padding: 0 24px; */
	}

	.group_12 {
		margin-top: 14px;
		padding: 15.5px 0 12px;
		border-top: solid 0.5px #eeeeee;
	}

	.group_14 {
		padding: 15px 0 14px;
		border-bottom: solid 0.5px #eeeeee;
	}

	.group_16 {
		padding: 15px 0 17.5px;
	}

	.text_4 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_5 {
		color: #1d6aff;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.group_7 {
		margin-top: 16.5px;
	}

	.text_11 {
		margin-left: 8px;
		color: #333333;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.text_13 {
		margin-bottom: 2.5px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.group_11 {
		margin-left: 39.5px;
	}

	.text_16 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_17 {

		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
		text-align: right;
	}

	.text_18 {
		margin-bottom: 3px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_21 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.group_17 {
		display: flex;
		align-items: center;
	}

	.text_25 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.image_14 {
		margin-top: 16.5px;
		border-radius: 8px;
		width: 327px;
		height: 164px;
	}

	.text_26 {
		margin-top: 15px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.image_15 {
		margin-top: 16.5px;
		border-radius: 8px;
		width: 327px;
		height: 164px;
	}

	.text_6 {
		margin-bottom: 3px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_7 {
		color: #1d6aff;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_8 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_9 {
		color: #1d6aff;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.image_7 {
		margin-top: 3px;
		flex-shrink: 0;
		border-radius: 50%;
		width: 16px;
		height: 16px;
	}

	.text_14 {
		margin-left: 8px;
		margin-bottom: 2.5px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_15 {
		margin: 7rpx 0 3px -30px;
		color: #999999;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.image_9 {
		margin-top: 3px;
	}

	.text_19 {
		margin-left: 12px;
		margin-top: 3px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.image_10 {
		margin-left: 14px;
		margin-top: 3px;
	}

	.text_20 {
		display: flex;
		align-items: center;
		margin-left: 15px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_22 {
		color: #fe641a;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.image_11 {
		margin: 3px 8px 2px 2px;
		flex-shrink: 0;
		width: 7px;
		height: 13px;
	}
</style>
